<template>
    <div class="doctor-appointment-container">
        <!-- 顶部导航栏 -->
        <div class="header">
            <van-icon name="arrow-left" class="back-icon" @click="onClickLeft" />
            <div class="title">{{ departmentName }}</div>
            <div class="action-icons">
                <van-icon name="ellipsis" class="more-icon" />
                <van-icon name="scan" class="qrcode-icon" />
            </div>
        </div>

        <!-- 日期选择 -->
        <div class="date-tabs">
            <div v-for="(date, idx) in dateList" :key="date.date"
                :class="['date-tab', { selected: idx === selectedDate }]" @click="selectedDate = idx">
                <div class="date-label">{{ date.label }}</div>
                <div class="date-value">{{ date.date }}</div>
            </div>
        </div>

        <!-- 医生列表 -->
        <div class="doctor-list">
            <div v-for="doctor in doctors" :key="doctor.id" class="doctor-card">
                <div class="doctor-header">
                    <img :src="doctor.avatar" class="avatar" />
                    <div class="doctor-info">
                        <div class="doctor-title">
                            <span class="name">{{ doctor.name }}</span>
                            <span class="level">{{ doctor.level }}</span>
                            <span class="all-schedule">{{ $t('appointmentDetail.allSchedule') }}</span>
                        </div>
                        <div class="doctor-desc">{{ doctor.desc }}</div>
                    </div>
                </div>
                <div class="doctor-schedule">
                    <div class="schedule-item" @click="showBookingDialog(doctor)">
                        <span>{{ dateList[selectedDate].date }} ({{ dateList[selectedDate].label }})</span>
                        <span>{{ doctor.schedule.time }}</span>
                        <span>{{ $t('appointmentDetail.fee') }}：<span class="fee">{{ doctor.schedule.fee }}{{
                            $t('appointmentDetail.currency') }}</span></span>
                        <span class="remain">{{ $t('appointmentDetail.remain') }}{{ doctor.schedule.remain }}</span>
                    </div>
                    <div class="all-schedule-link">{{ $t('appointmentDetail.viewAllSchedule') }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter,useRoute } from 'vue-router'
import { showDialog, showToast } from 'vant'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const router = useRouter()
// const departmentName = '皮肤科门诊'
// query
const query = useRoute().query
const departmentName = query.subDept as string
const selectedDate = ref(3)
const dateList = [
    { label: t('appointmentDetail.today'), date: '05-04' },
    { label: t('appointmentDetail.tomorrow'), date: '05-05' },
    { label: t('appointmentDetail.tuesday'), date: '05-06' },
    { label: t('appointmentDetail.wednesday'), date: '05-07' },
    { label: t('appointmentDetail.thursday'), date: '05-08' },
]
const doctors = [
    {
        id: 1,
        name: '席建元',
        level: t('appointmentDetail.chiefPhysician'),
        avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
        desc: t('appointmentDetail.doctorDesc1'),
        schedule: { time: t('appointmentDetail.morning'), fee: 78.0, remain: 32 },
    },
    {
        id: 2,
        name: '刘鸿宾',
        level: t('appointmentDetail.deputyChiefPhysician'),
        avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
        desc: t('appointmentDetail.doctorDesc2'),
        schedule: { time: t('appointmentDetail.morning'), fee: 25.0, remain: 34 },
    },
]

const onClickLeft = () => {
    router.back()
}

function showBookingDialog(doctor: any) {
    showDialog({
        title: t('appointmentDetail.bookingTitle'),
        message: t('appointmentDetail.bookingMessage', { name: doctor.name, level: doctor.level, time: doctor.schedule.time, fee: doctor.schedule.fee }),
        confirmButtonText: t('appointmentDetail.confirmBooking'),
        cancelButtonText: t('appointmentDetail.cancel'),
        showCancelButton: true,
    }).then(() => {
        showToast(t('appointmentDetail.bookingSuccess'))
    })
}
</script>

<style lang="scss" scoped>
.doctor-appointment-container {
    background: #f7f9fa;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #eee;
}

.back-icon {
    font-size: 24px;
    color: #333;
}

.title {
    flex: 1;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
}

.action-icons {
    display: flex;
    align-items: center;
}

.more-icon,
.qrcode-icon {
    font-size: 24px;
    margin-left: 16px;
    color: #333;
}

.date-tabs {
    display: flex;
    background: #fff;
    border-bottom: 1px solid #eee;
    overflow-x: auto;
}

.date-tab {
    flex: 1;
    min-width: 70px;
    text-align: center;
    padding: 8px 0 4px 0;
    color: #888;
    cursor: pointer;
}

.date-tab.selected {
    color: #4080ff;
    border-bottom: 2px solid #4080ff;
    background: #e6f0ff;
}

.date-label {
    font-size: 14px;
}

.date-value {
    font-size: 16px;
    font-weight: 500;
}

.doctor-list {
    padding: 12px;
}

.doctor-card {
    background: #fff;
    border-radius: 10px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px #f0f1f2;
    padding: 16px;
}

.doctor-header {
    display: flex;
    align-items: flex-start;
}

.avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin-right: 12px;
}

.doctor-info {
    flex: 1;
}

.doctor-title {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
}

.name {
    margin-right: 8px;
}

.level {
    color: #888;
    font-size: 13px;
    margin-right: 8px;
}

.all-schedule {
    color: #4080ff;
    font-size: 13px;
    margin-left: auto;
    cursor: pointer;
}

.doctor-desc {
    font-size: 13px;
    color: #666;
    margin-top: 4px;
    line-height: 1.5;
}

.doctor-schedule {
    margin-top: 12px;
    background: #f7f9fa;
    border-radius: 6px;
    padding: 10px 12px;
}

.schedule-item {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #333;
    gap: 10px;
}

.fee {
    color: #fa6400;
    font-weight: 600;
}

.remain {
    color: #4080ff;
    margin-left: 8px;
}

.all-schedule-link {
    color: #4080ff;
    font-size: 13px;
    margin-top: 8px;
    cursor: pointer;
}
</style>